<template>
	<view class="container">
		<view class="card">
			<view class="item flex-row" style="justify-content: flex-start;">
				<view class="label">负责人</view>
				<view>{{ username }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患类型</view>
				<view class="input">{{ form.title || '' }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患等级</view>
				<view class="input">{{ dangerLevels[form.danger_status - 1] }}</view>
			</view>
			<view class="item flex-row" style="align-items: flex-start;justify-content: flex-start;">
				<view class="label">现场视图</view>
				<view class="upload">
					<upload v-if="pics.length" :files="pics" :showBtn="false" :icon="false"></upload>
				</view>
			</view>
			<view class="item flex-row" style="align-items: flex-start;">
				<view class="label">隐患描述</view>
				<textarea v-model="form.description" placeholder="隐患描述..." disabled/>
			</view>
			<view class="item flex-row">
				<view class="label">风险等级</view>
				<view class="input">{{ riskLevels[form.fx_status - 1] }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患大类</view>
				<view class="input">{{ form.cart_top }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患小类</view>
				<view class="input">{{ form.cart }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">整改期限</view>
				<view class="input">{{ form.limit_time }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">整改人</view>
				<view class="input">{{ form.done_username }}</view>
			</view>
			<view class="item btns flex-row">
				<view class="label"></view>
				<view class="input flex-row">
					<view @click="goBack" class="btn">返回上级</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/';
import { DANGER_TOP_CATE, DANGER_SUB_CATE } from '@/common/config.js';
export default{
	components: { upload },
	data(){
		return {
			dangerLevels: ['一般事故隐患', '疑似重大事故隐患'],
			riskLevels: ['I','II','III','IV'],
			dangerTopCates: DANGER_TOP_CATE,
			dangerSubCates: DANGER_SUB_CATE,
			userid: uni.getStorageSync('userid'),
			id: '',
			username: '',
			pics: [],
			form: {}
		}
	},
	onLoad(option){
		this.id = option.id;
		this.getDetail();
		this.getUserDetail();
	},
	methods: {
		// 返回
		goBack(){
			uni.navigateBack();
		},
		//获取用户信息
		getUserDetail(){
			let _this = this;
			uni.request({
				url: this.$API.getUserDetail,
				method:"POST",
				data:{ userid: this.userid},
				header:this.$API.get_head(),
				success: (res) => {
					_this.username = res.data.data.NAME;
				}
			})
		},
		//获取详情
		getDetail(){
			let _this = this;
			uni.request({
				url: this.$API.dangerHandleDetail,
				data:{
					id: this.id,
					userid: this.userid,
				},
				header:this.$API.get_head(),
				success: (res) => {
					let data = res.data.data;
					
					// 处理数据
					this.form = data;
					
					// 处理图片
					let pics = data.pics.split(',');
					this.pics = pics.map(item=>_this.$API.baseURL+item);
				}
			})
		}
	}
}
</script>

<style scoped>
textarea{
	width: calc(100% - 160upx);
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 30upx;
	text-indent: 24upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item .label{
	width: 160upx;
}
.card .item .input{
	width: calc(100% - 160upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 28upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: red;
}
</style>
